<!DOCTYPE html>

<html lang="en">
<head>
	<meta charset="utf-8">
	<title>ScrollMagic Source: ScrollMagic/Scene.js</title>
	
  <script src="scripts/prettify/prettify.js"> </script>
  <script src="scripts/prettify/lang-css.js"> </script>
	<!--[if lt IE 9]>
	<script src="//html5shiv.googlecode.com/svn/trunk/html5.js"></script>
	<![endif]-->
	<link type="text/css" rel="stylesheet" href="styles/sunlight.default.css">
	<link type="text/css" rel="stylesheet" href="styles/prettify-tomorrow.css">
	<link rel="shortcut icon" href="../assets/img/favicon.ico" type="image/x-icon">

	
	<link type="text/css" rel="stylesheet" href="styles/site.cosmo.css">
	
</head>

<body>
<div class="container-fluid">
	<div class="navbar navbar-fixed-top navbar-inverse">
		<div class="navbar-inner">
			<a class="brand" href="index.html">ScrollMagic</a>
			<ul class="nav">
				
				<li class="dropdown">
					<a href="classes.list.html" class="dropdown-toggle" data-toggle="dropdown">Classes<b
						class="caret"></b></a>

					<ul class="dropdown-menu ">
						
						<li>
							<a href="ScrollMagic.Controller.html">Controller</a>
						</li>
						
						<li>
							<a href="ScrollMagic.Scene.html">Scene</a>
						</li>
						

					</ul>
				</li>
				
				<li class="dropdown">
					<a href="events.list.html" class="dropdown-toggle" data-toggle="dropdown">Events<b
						class="caret"></b></a>

					<ul class="dropdown-menu ">
						
						<li>
							<a href="ScrollMagic.Scene.html#event:add">add</a>
						</li>
						
						<li>
							<a href="ScrollMagic.Scene.html#event:change">change</a>
						</li>
						
						<li>
							<a href="ScrollMagic.Scene.html#event:destroy">destroy</a>
						</li>
						
						<li>
							<a href="ScrollMagic.Scene.html#event:end">end</a>
						</li>
						
						<li>
							<a href="ScrollMagic.Scene.html#event:enter">enter</a>
						</li>
						
						<li>
							<a href="ScrollMagic.Scene.html#event:leave">leave</a>
						</li>
						
						<li>
							<a href="ScrollMagic.Scene.html#event:progress">progress</a>
						</li>
						
						<li>
							<a href="ScrollMagic.Scene.html#event:remove">remove</a>
						</li>
						
						<li>
							<a href="ScrollMagic.Scene.html#event:shift">shift</a>
						</li>
						
						<li>
							<a href="ScrollMagic.Scene.html#event:start">start</a>
						</li>
						
						<li>
							<a href="ScrollMagic.Scene.html#event:update">update</a>
						</li>
						

					</ul>
				</li>
				
				<li class="dropdown">
					<a href="mixins.list.html" class="dropdown-toggle" data-toggle="dropdown">Plugins<b
						class="caret"></b></a>

					<ul class="dropdown-menu ">
						
						<li>
							<a href="animation.GSAP.html">GSAP</a>
						</li>
						
						<li>
							<a href="animation.Velocity.html">Velocity</a>
						</li>
						
						<li>
							<a href="debug.addIndicators.html">addIndicators</a>
						</li>
						
						<li>
							<a href="framework.jQuery.html">jQuery</a>
						</li>
						

					</ul>
				</li>
				
			</ul>
		</div>
	</div>

	<div class="row-fluid">

		
			<div class="span12">
				
				<div id="main">
					


		<h1 class="page-title">Source: ScrollMagic/Scene.js</h1>
    
    <section>
        <article>
            <pre class="sunlight-highlight-javascript linenums">/**
 * A Scene defines where the controller should react and how.
 *
 * @class
 *
 * @example
 * // create a standard scene and add it to a controller
 * new ScrollMagic.Scene()
 *		.addTo(controller);
 *
 * // create a scene with custom options and assign a handler to it.
 * var scene = new ScrollMagic.Scene({
 * 		duration: 100,
 *		offset: 200,
 *		triggerHook: "onEnter",
 *		reverse: false
 * });
 *
 * @param {object} [options] - Options for the Scene. The options can be updated at any time.  
 							   Instead of setting the options for each scene individually you can also set them globally in the controller as the controllers `globalSceneOptions` option. The object accepts the same properties as the ones below.  
 							   When a scene is added to the controller the options defined using the Scene constructor will be overwritten by those set in `globalSceneOptions`.
 * @param {(number|string|function)} [options.duration=0] - The duration of the scene. 
 					Please see `Scene.duration()` for details.
 * @param {number} [options.offset=0] - Offset Value for the Trigger Position. If no triggerElement is defined this will be the scroll distance from the start of the page, after which the scene will start.
 * @param {(string|object)} [options.triggerElement=null] - Selector or DOM object that defines the start of the scene. If undefined the scene will start right at the start of the page (unless an offset is set).
 * @param {(number|string)} [options.triggerHook="onCenter"] - Can be a number between 0 and 1 defining the position of the trigger Hook in relation to the viewport.  
 															  Can also be defined using a string:
 															  ** `"onEnter"` => `1`
 															  ** `"onCenter"` => `0.5`
 															  ** `"onLeave"` => `0`
 * @param {boolean} [options.reverse=true] - Should the scene reverse, when scrolling up?
 * @param {number} [options.loglevel=2] - Loglevel for debugging. Note that logging is disabled in the minified version of ScrollMagic.
 										  ** `0` => silent
 										  ** `1` => errors
 										  ** `2` => errors, warnings
 										  ** `3` => errors, warnings, debuginfo
 * 
 */
ScrollMagic.Scene = function (options) {

	/*
	 * ----------------------------------------------------------------
	 * settings
	 * ----------------------------------------------------------------
	 */

	var
		NAMESPACE = 'ScrollMagic.Scene',
		SCENE_STATE_BEFORE = 'BEFORE',
		SCENE_STATE_DURING = 'DURING',
		SCENE_STATE_AFTER = 'AFTER',
		DEFAULT_OPTIONS = SCENE_OPTIONS.defaults;

	/*
	 * ----------------------------------------------------------------
	 * private vars
	 * ----------------------------------------------------------------
	 */

	var
		Scene = this,
		_options = _util.extend({}, DEFAULT_OPTIONS, options),
		_state = SCENE_STATE_BEFORE,
		_progress = 0,
		_scrollOffset = {start: 0, end: 0}, // reflects the controllers's scroll position for the start and end of the scene respectively
		_triggerPos = 0,
		_enabled = true,
		_durationUpdateMethod,
		_controller;

	/**
	 * Internal constructor function of the ScrollMagic Scene
	 * @private
	 */
	var construct = function () {
		for (var key in _options) { // check supplied options
			if (!DEFAULT_OPTIONS.hasOwnProperty(key)) {
				log(2, "WARNING: Unknown option \"" + key + "\"");
				delete _options[key];
			}
		}
		// add getters/setters for all possible options
		for (var optionName in DEFAULT_OPTIONS) {
			addSceneOption(optionName);
		}
		// validate all options
		validateOption();
	};
	
	// @include('Scene/event-management.js')

	// @include('Scene/core.js')

	// @include('Scene/update-params.js')

	// @include('Scene/getters-setters.js')
	
	// @include('Scene/feature-pinning.js')

	// @include('Scene/feature-classToggles.js')

	// INIT
	construct();
	return Scene;
};

// @include('Scene/_static.js')
</pre>
        </article>
    </section>





				</div>

				<div class="clearfix"></div>
				<footer>
					
					
		<span class="copyright">
		© Jan Paepke 2015
		</span>
					<br />
					
		<span class="jsdoc-message">
		Documentation generated by <a href="https://github.com/jsdoc3/jsdoc" target="_blank">JSDoc 3.5.5</a>
		using a customized version of the <a href="https://github.com/terryweiss/docstrap" target="_blank">DocStrap template</a>.
		</span>
				</footer>
			</div>

			
			<br clear="both">
		</div>

	</div>
	<script src="scripts/sunlight.js"></script>
	<script src="scripts/sunlight.javascript.js"></script>
	<script src="scripts/sunlight-plugin.doclinks.js"></script>
	<script src="scripts/sunlight-plugin.linenumbers.js"></script>
	<script src="scripts/sunlight-plugin.menu.js"></script>
	<script src="scripts/jquery.min.js"></script>
	<script src="scripts/jquery.scrollTo.js"></script>
	<script src="scripts/jquery.localScroll.js"></script>
	<script src="scripts/bootstrap-dropdown.js"></script>
	<script src="scripts/toc.js"></script>

	<script> prettyPrint(); </script>
	<script>  Sunlight.highlightAll({lineNumbers:true,  showMenu: true, enableDoclinks :true}); </script>

	<script>
		function openDeeplinkedElement (skipAni) {
			try {
				$("dt h4.member-collapsed").filter(window.location.hash.substring(1).replace(":", "\\:")).trigger("click", skipAni);
			} catch (e) {
				console.warn("ah ah ah! :p");
			}
		}
		$( function () {
			$( "#toc" ).toc( {
			    anchorName  : function(i, heading, prefix) {
					return $(heading).attr("id") || ( prefix + i );
				},
				selectors   : "h1:visible,h2:visible,h3:visible,h4:visible",
				onScrollFinish : openDeeplinkedElement,
				highlightOffset : 10,
				scrollOffset: 60
			} );
			$( "#toc>ul" ).addClass( "nav nav-pills nav-stacked" );
			$( "#main span[id^='toc']" ).addClass( "toc-shim" );

		} );
	</script>

	
	<script>
		$( function () {
			// $('#main').localScroll({
			// 	offset: { top: 56 } //offset by the height of your header (give or take a few px, see what works for you)
			// });
			// workaround for anchors below header...
			window.setTimeout(function () {
				$(document).scrollTop($(document).scrollTop()-60);
			}, 1)
			
			var hash = window.location.hash.substring(1).replace(":", "\\:");
			$( "dt h4.name" ).each( function () {
				var $this = $( this );
				var icon = $( "<i/>" ).addClass( "icon-plus-sign" ).addClass( "pull-right" ).addClass( "icon-white" );
				var dt = $this.parents( "dt" );
				var children = dt.next( "dd" );

				$this.append( icon ).css( {cursor : "pointer"} );
				$this.addClass( "member-collapsed" ).addClass( "member" );
				if (hash != $this.attr("id")) {
					children.hide();
				}
				$this.toggle( function (e, skipAni) {
					var scrollPos = $(document).scrollTop();
					window.location.hash = $(this).attr("id");
					$(document).scrollTop(scrollPos);
					icon.addClass( "icon-minus-sign" ).removeClass( "icon-plus-sign" ).removeClass( "icon-white" );
					$this.addClass( "member-open" ).removeClass( "member-collapsed" );
					children.slideDown(skipAni ? 0 : undefined);
				}, function () {
					icon.addClass( "icon-plus-sign" ).removeClass( "icon-minus-sign" ).addClass( "icon-white" );
					$this.addClass( "member-collapsed" ).removeClass( "member-open" );
					children.slideUp();
				} );
			} );
			// open if deeplinked
			if (hash.length > 0)
				openDeeplinkedElement(true);
		} );
	</script>
	

	<script type="text/javascript" src="../assets/js/tracking.js"></script>
</body>
</html>
